<template>
  <div>
    <el-form
      :inline="true"
      :model="form"
      class="demo-form-inline"
      style="padding: 20px"
    >
      <el-form-item label="项目名">
        <el-input
          v-model="form.projectName"
          placeholder="请输入项目名"
        ></el-input>
      </el-form-item>
      <el-form-item label="开始日期">
        <el-date-picker
          v-model="form.startDate"
          placeholder="请输入开始日期"
          maxlength="30"
          style="width: 100%"
        />
      </el-form-item>
      <el-form-item label="结束日期">
        <el-date-picker
          v-model="form.endDate"
          placeholder="请输入结束日期"
          maxlength="30"
          style="width: 100%"
        />
      </el-form-item>
      <el-form-item label="项目状态" prop="status">
        <el-select v-model="form.status" placeholder="请选择项目状态">
          <el-option label="挂起" value="0"></el-option>
          <el-option label="正常" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="reset">重置</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="newlyBuilt">+新建</el-button>
      </el-form-item>
    </el-form>

    <!-- 数据列表 -->
    <el-table
      v-loading="loading"
      :data="tableData"
      @selection-change="handleSelectionChange"
    >
      <el-table-column prop="id" label="编号" align="center"> </el-table-column>
      <el-table-column prop="projectName" label="项目名" align="center">
      </el-table-column>
      <el-table-column prop="projectHeader" label="负责人" align="center">
      </el-table-column>
      <el-table-column prop="startDate" label="开始日期" align="center">
      </el-table-column>
      <el-table-column prop="endDate" label="结束日期" align="center">
      </el-table-column>
      <el-table-column prop="status" label="项目状态" align="center">
        <template slot-scope="scope">
          <el-tag type="warning" v-if="scope.row.status === 0">挂起</el-tag>
          <el-tag type="success" v-if="scope.row.status === 1">正常</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button @click="handleUpdate(scope.row)" type="text" size="small">
            修改
          </el-button>
          <el-button @click="handleDelete(scope.row)" type="text" size="small"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加或修改用户配置对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="项目名" prop="projectName">
              <el-input
                v-model="form.projectName"
                placeholder="请输入项目名"
                maxlength="30"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="负责人" prop="projectHeader">
              <el-input
                v-model="form.projectHeader"
                placeholder="请输入负责人"
                maxlength="30"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="开始日期" prop="startDate">
              <el-date-picker
                v-model="form.startDate"
                placeholder="请输入开始日期"
                maxlength="30"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="结束日期" prop="endDate">
              <el-date-picker
                v-model="form.endDate"
                placeholder="请输入结束日期"
                maxlength="30"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="项目状态">
              <el-select v-model="form.status" placeholder="请选择项目状态">
                <el-option label="挂起" value="0"></el-option>
                <el-option label="正常" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="项目介绍图片">
              <el-input
                v-model="form.ProjectIntroduction"
                placeholder="请输入项目介绍图片"
                maxlength="30"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getMaintenanceList,
  delMaintenance,
  putMaintenance,
  getMaintenance,
  postMaintenance,
} from "@/api/mes/maintenance";
import { Message } from "element-ui";
export default {
  name: "Maintenance",
  data() {
    return {
      tableData: null,
      form: {
        id: null,
        projectName: null, //项目名
        projectHeader: null, // 负责人
        startDate: null, // 开始日期
        endDate: null, // 结束日期
        status: null, // 项目状态
        ProjectIntroduction: null, // 项目介绍图片
      },
      open: false,
      title: "",

      // 表单校验
      rules: {
        projectName: [
          { required: true, message: "请输入项目名", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        projectHeader: [
          { required: true, message: "请输入负责人", trigger: "blur" },
        ],
        startDate: [
          { required: true, message: "请输入开始日期", trigger: "blur" },
        ],
        endDate: [
          { required: true, message: "请输入结束日期", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 清除表单
    clearForm() {
      this.form = {
        id: null,
        projectName: null, //项目名
        projectHeader: null, // 负责人
        startDate: null, // 开始日期
        endDate: null, // 结束日期
        status: null, // 项目状态
        ProjectIntroduction: null, // 项目介绍图片
      };
    },
    // 查询数据列表
    getList(data) {
      getMaintenanceList(data).then((response) => {
        this.tableData = response.data;
      });
    },
    // 删除数据
    handleDelete(id) {
      console.log(id.id);
      delMaintenance(id.id).then(() => {
        this.$message({
          message: "删除成功",
          type: "success",
        });
        this.getList();
      });
    },
    // 修改数据
    handleUpdate(row) {
      this.title = "修改项目";
      this.open = true;
      this.form.id = row.id;
      getMaintenance(row.id).then((res) => {
        this.form = {
          id: res.data.id,
          projectName: res.data.projectName, //项目名
          projectHeader: res.data.projectHeader, // 负责人
          startDate: res.data.startDate, // 开始日期
          endDate: res.data.endDate, // 结束日期
          status: res.data.status, // 项目状态
        };
      });
    },
    // 新建
    newlyBuilt() {
      this.title = "添加项目管理";
      this.open = true;
    },
    // 确认弹窗
    submitForm() {
      this.open = false;
      if (this.title == "修改项目") {
        putMaintenance(this.form).then(() => {
          this.clearForm();
          this.getList();
        });
      }
      if (this.title == "添加项目管理") {
        postMaintenance(this.form).then(() => {
          this.clearForm();
          this.$message({
            message: "新建成功",
            type: "success",
          });
          this.getList();
        });
      }
    },
    // 取消弹窗
    cancel() {
      this.open = false;
      this.clearForm();
    },

    // 查询
    onSubmit() {
      this.getList(this.addDateRange(this.form));
      this.clearForm();
    },
    // 重置
    reset() {
      this.clearForm();
      this.getList();
    },
  },
};
</script>